<template>
  <div class="search">
    <Card>
      <Tabs v-model="searchForm.resourceType" @on-click="handleSearch">
        <TabPane v-for="(i, k) in typeList" :key="k" :label="i.label" :name="i.value" />
      </Tabs>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          @submit.native.prevent
          class="search-form"
        >
          <Form-item label="关键字" prop="keywords">
            <Input
              type="text"
              v-model="searchForm.keywords"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="昵称" prop="nickename">
            <Input
              type="text"
              v-model="searchForm.nickename"
              placeholder="请输入昵称"
              :maxlength="10"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="发布时间" prop="dateRange">
            <DatePicker
              type="daterange"
              v-model="searchForm.dateRange"
              placement="bottom-end"
              format="yyyy-MM-dd"
              placeholder="选择发布时间"
              style="width: 280px"
            />
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Row class="operation padding-row">
        <Button @click="handleDel()" type="primary">删除</Button>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="dataList"
        ref="table"
        @on-selection-change="changeSelect"
      >
        <template slot-scope="{ row }" slot="face">
          <img class="headerFace" :src="row.face ? row.face : row.expertFace" />
        </template>
        <template slot-scope="{ row }" slot="nickName">
          {{
            searchForm.resourceType == "COMMUNITY"
              ? row.nick_name
              : row.nickName
              ? row.nickName
              : row.expertName
          }}
        </template>
        <template slot-scope="{ row }" slot="relation">
          {{ searchForm.resourceType == "COMMUNITY" ? row.title : row.resourceName }}
        </template>
        <template slot-scope="{ row }" slot="createTime">
          {{
            searchForm.resourceType == "COMMUNITY"
              ? format(row.createime)
              : row.createTime
          }}
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="primary" size="small" @click="handleDel(row)">删除</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.pagesize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_community from "@/api/community.js";
import * as API_member from "@/api/member.js";

export default {
  name: "comment-list",
  data() {
    return {
      loading: true, // 表单加载状态
      typeList: [
        { label: "社区", value: "COMMUNITY" },
        { label: "资讯", value: "INFORMATION" },
        { label: "课程", value: "COURSE" },
        { label: "基地", value: "TRAINING_BASE" },
        { label: "动态", value: "DYNAMIC" },
      ],
      searchForm: {
        // 请求参数
        page: 1,
        pagesize: 10,
        resourceType: "COMMUNITY", // 类型
        keywords: null, // 关键字
        nickename: null, // 昵称
        dateRange: null, // 下单时间范围
        start: null, // 下单开始时间
        end: null, // 下单结束时间
      },
      selectList: [], // 多选数据
      columns: [
        { type: "selection", width: 60, align: "center" },
        { title: "序号", minWidth: 100, type: "index" },
        { title: "评论人头像", minWidth: 100, slot: "face", align: "center" },
        { title: "昵称", minWidth: 120, slot: "nickName", tooltip: true },
        {
          title: "关联话题",
          minWidth: 180,
          slot: "relation",
          tooltip: true,
          renderHeader: (h) => {
            let type = this.searchForm.resourceType;
            let label = "";
            if (type == "COMMUNITY") label = "关联话题";
            if (type == "INFORMATION") label = "关联资讯";
            if (type == "COURSE") label = "关联课程";
            if (type == "TRAINING_BASE") label = "关联基地";
            if (type == "DYNAMIC") label = "关联动态";
            return h("div", label);
          },
        },
        { title: "评论内容", key: "content", minWidth: 300, tooltip: true },
        { title: "提交时间", minWidth: 180, slot: "createTime", tooltip: true },
        {
          title: "显示/隐藏",
          align: "center",
          minWidth: 120,
          render: (h, params) => {
            let _this = this;
            if (_this.searchForm.resourceType == "COMMUNITY") {
              return h("div", {}, [
                h("i-switch", {
                  props: {
                    value: params.row.is_dis,
                    trueValue: 0,
                    falseValue: 1,
                    size: "large",
                    trueColor: "#FF5C58",
                    beforeChange() {
                      return new Promise((resolve, reject) => {
                        this.$Modal.confirm({
                          title: `确认${params.row.is_dis == 0 ? "隐藏" : "显示"}`,
                          content: `是否${
                            params.row.is_dis == 0 ? "隐藏" : "显示"
                          }该条评论？`,
                          onOk: () => {
                            let query = {
                              id: params.row.id,
                              is_dis: params.row.is_dis == 0 ? 1 : 0,
                            };
                            API_community.commentDisplay(query)
                              .then((res) => {
                                if (res.code == 200) {
                                  _this.$Message.success(res.msg);
                                  resolve();
                                } else {
                                  _this.$Message.success(res.msg);
                                  reject();
                                }
                              })
                              .catch(() => {
                                reject();
                              });
                          },
                        });
                      }).then(() => {
                        _this.getCommunity();
                      });
                    },
                  },
                  scopedSlots: {
                    open: () => h("span", "显示"),
                    close: () => h("span", "隐藏"),
                  },
                }),
              ]);
            } else {
              return h("div", {}, [
                h("i-switch", {
                  props: {
                    value: params.row.deleteFlag,
                    trueValue: false,
                    falseValue: true,
                    size: "large",
                    trueColor: "#FF5C58",
                    beforeChange() {
                      return new Promise((resolve, reject) => {
                        this.$Modal.confirm({
                          title: `确认${params.row.deleteFlag ? "显示" : "隐藏"}`,
                          content: `是否${
                            params.row.deleteFlag ? "显示" : "隐藏"
                          }该条评论？`,
                          onOk: () => {
                            API_member.updatePageReview(
                              params.row.id,
                              _this.searchForm.resourceType
                            )
                              .then((res) => {
                                if (res.code == 200) {
                                  _this.$Message.success(res.message);
                                  resolve();
                                } else {
                                  _this.$Message.success(res.message);
                                  reject();
                                }
                              })
                              .catch(() => {
                                reject();
                              });
                          },
                        });
                      }).then(() => {
                        _this.getData();
                      });
                    },
                  },
                  scopedSlots: {
                    open: () => h("span", "显示"),
                    close: () => h("span", "隐藏"),
                  },
                }),
              ]);
            }
          },
        },
        {
          title: "操作",
          align: "center",
          slot: "action",
          width: 200,
          fixed: "right",
        },
      ],
      dataList: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  mounted() {
    this.getCommunity();
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.checkSearch();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pagesize = v;
      this.searchForm.page = 1;
      this.checkSearch();
    },
    // 搜索
    handleSearch() {
      this.dataList = [];
      this.searchForm.page = 1;
      this.checkSearch();
    },
    // 判断查询
    checkSearch() {
      if (this.searchForm.resourceType == "COMMUNITY") {
        this.getCommunity();
      } else {
        this.getData();
      }
    },
    // 多选
    changeSelect(e) {
      this.selectList = e;
    },
    // 时间戳转换
    format(v) {
      let date = "";
      if (v) date = new Date(v * 1000).Format("yyyy-MM-dd hh:mm:ss");
      return date;
    },
    // 删除
    handleDel(v) {
      let ids = "";
      let content = "<p>您确认要删除此条评论吗？</p>";
      if (v) ids = v.id;
      if (!v && this.selectList.length == 0) {
        this.$Message.warning("请先勾选数据");
        return;
      }
      if (!v && this.selectList.length) {
        ids = this.selectList
          .map((i) => {
            return i.id;
          })
          .join(",");
        content = "<p>您确认要删除所选的" + this.selectList.length + "条数据吗？</p>";
      }
      this.$Modal.confirm({
        title: "确认删除",
        content,
        onOk: () => {
          if (this.searchForm.resourceType == "COMMUNITY") {
            API_community.delComment({ ids }).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.checkSearch();
              }
            });
          } else {
            API_member.delPageReview(ids, this.searchForm.resourceType).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.message);
                this.checkSearch();
              }
            });
          }
        },
      });
    },
    // 查询社区评论列表
    getCommunity() {
      let params = Object.assign({}, this.searchForm);
      let range = params.dateRange;
      if (range && range.length && range[0]) {
        params.stime = new Date(range[0]).getTime() / 1000 || "";
        params.etime = new Date(range[1]).getTime() / 1000 || "";
      }
      delete params.dateRange;
      delete params.resourceType;

      this.loading = true;
      API_community.commentList(params)
        .then((res) => {
          if (res.code == 200) {
            this.dataList = res.data;
            this.total = parseInt(res.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查询资讯，课程、基地、动态列表
    getData() {
      const {
        keywords,
        resourceType,
        nickename,
        page,
        pagesize,
        dateRange,
      } = this.searchForm;
      let params = {
        evaluationType: 1, // 0评价，1评论
        keyword: keywords,
        resourceType,
        memberName: nickename,
        pageNumber: page,
        pageSize: pagesize,
      };
      if (dateRange && dateRange.length && dateRange[0]) {
        params.startTime = new Date(dateRange[0]).Format("yyyy-MM-dd") + " 00:00:00";
        params.endTime = new Date(dateRange[1]).Format("yyyy-MM-dd") + " 23:59:59";
      }
      this.loading = true;
      API_member.getPageReview(params)
        .then((res) => {
          if (res.code == 200) {
            this.dataList = res.result.list;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.headerFace {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hideen;
  background-color: #c0c0c0;
}
.modal-info {
  height: 600px;
  overflow-y: auto;
  p::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 14px;
    vertical-align: top;
    border-radius: 2px;
    margin-right: 20px;
    background-color: #1989fa;
  }
  .modal-row {
    display: flex;
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 90px;
      color: #777777;
    }
    > div:last-child {
      flex: 1;
      word-break: break-all;
    }
    img {
      width: 120px;
      height: 120px;
      margin: 0 10px 10px 0;
    }
  }
  .modal-row2 {
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 160px;
      color: #777777;
    }
    > div:last-child {
      word-break: break-all;
    }
  }
  .divider {
    margin: 20px;
    border-bottom: 1px solid #e4e4e4;
  }
}
</style>
